<template>
    <div class="page_content">
        <div class="data-content">
            <div class="w-fixed-center">
                <a-spin size="large" :spinning="isLoading">
                    <div class="video-list">
                        <div v-for="item in apiData" :key="item.id" class="video">
                            <router-link :to="{ name: 'web_video_detail', params: { id: item.id } }">
                                <img class="img" :src="imgDomainUrl + item.img" alt="">
                                <p class="price ccyc1">
                                    <span class="date">{{ item.add_date }}</span>
                                    <span class="times"><img src="@/assets/img/web/video_times.png" alt="">{{
                                        item.play_times_sum }}</span>
                                </p>
                                <p class="name ccyc2">{{ item.title }}</p>
                            </router-link>
                        </div>
                    </div>

                    <a-pagination v-model:current="currentPage" v-model:page-size="pageSize" :hideOnSinglePage=true
                        :showSizeChanger=false :total="dataTotle"
                        :show-total="(total, range) => `第 ${range[0]} ~ ${range[1]} 条，共 ${total} 条`"
                        v-if="dataTotle > 0" />
                </a-spin>
            </div>
        </div>
    </div>
</template>

<script setup>
import { message } from 'ant-design-vue';
import { ref, watch, inject } from 'vue';   //引入ref
import { getVideoList } from "@/api/web";   //引入api
import { scrollToTop } from '@/utils/scrollToTop.js';   //引入滚动到顶部的函数
//设置导航选中状态
import { webNavSelected } from '@/store/webNavSelected.js';
webNavSelected.set('video');

const isLoading = ref(true);    // 控制loading

const { imgDomainUrl } = inject('imgDomainUrl');  // 依赖注入--文件、图片前的域名

const pageSize = ref(10);   //每页多少条
const currentPage = ref(1); //当前第几页
const dataTotle = ref(0); //共多少条数据
const apiData = ref({}); // 接口获取到的数据

// 获取数据
function getData() {
    // 页面滚动到顶部
    scrollToTop();
    const searchData = ref({ page: currentPage.value, limit: pageSize.value })
    //根据需求可以通过data传入参数
    getVideoList(searchData.value).then((res) => {
        isLoading.value = false;
        if (res === false) return;


        dataTotle.value = res.data.total;
        apiData.value = res.data.data;
    }).catch((rej) => {
        isLoading.value = false;
        message.error('错误：' + rej);
    });
}

// 当变量值改变时触发（immediate: true是进入页面直接执行，若不使用这个，请参考detail.vue文件的写法）
watch([pageSize, currentPage], async (newpageSize, oldpageSize) => {
    getData();
    isLoading.value = true;
}, { immediate: true })

</script>

<style scoped>
.page_content {
    background-color: #f2f2f2;
}

.data-content {
    padding: 20rem 0;
}

.video-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    min-height: 400rem;
}


.video {
    width: 19.2%;
    margin-bottom: 20rem;
    border: 1rem solid #ccc;
    border-radius: 5rem;
    padding: 10rem;
    margin-right: 1%;
}

.video:nth-child(5n) {
    margin-right: 0;
}

.video .img {
    width: 100%;
    height: 200rem;
    object-fit: cover;
}

.video .price {
    margin-top: 5rem;
    font-size: 14rem;
    margin-bottom: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
    height: 24rem;
    line-height: 24rem;
}

.video .price .times {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.video .price .times img {
    width: 14rem;
    height: 14rem;
    margin-right: 3rem;
}

.video .name {
    font-size: 16rem;
    margin-bottom: 5rem;
    color: #333;
}

:deep(.ant-pagination) {
    display: flex;
    justify-content: flex-end;
}

:deep(.ant-pagination-item, .ant-pagination-jump-next, .ant-pagination-jump-prev) {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*手机端样式*/
@media screen and (max-width: 800px) {
    .w-fixed-center {
        width: 345rem;
    }

    .video-list {
        justify-content: space-between;
    }

    .video {
        width: 163rem;
        margin-right: 0;
    }

    .video .img {
        height: 138rem;
    }

    :deep(.ant-pagination) {
        justify-content: space-between;
    }

    :deep(.ant-pagination-total-text) {
        display: none;
    }
}
</style>
